const path = require('path')
,HtmlWebpackPlugin = require('html-webpack-plugin')
,{CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {
    mode:'development',
    entry:{
        app:"./src/app.js"
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,"./dist")
    },
    //loader
    module:{
        rules:[
            {
                test:/\.js$/,
                exclude: /(node_modules|bower_components)/,
                use:[
                    {
                        loader:'babel-loader',
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        //自动dist
        new CleanWebpackPlugin()
        ,new HtmlWebpackPlugin({
            //对应页面的js
            chunks:['app']
            //生成的文件名
            ,filename:'page1.[contenthash:6].html'
            ,template:'./src/common/container.html'
            ,title:'page1'
            ,minify:{
                collapseWhitespace: true
                ,removeComments: true
                ,removeRedundantAttributes: true
                ,removeScriptTypeAttributes: true
                ,removeStyleLinkTypeAttributes: true
                ,useShortDoctype: true
            }
        })
    ],
    //静态服务器
    devServer:{
        //服务器资源地址
        contentBase: path.join(__dirname, 'dist')
        ,host:'localhost'
        ,port: 9000
        //为每个静态文件开启gizp压缩
        ,compress: true
        ,open:true
        ,hot: true
    }
}